<template>
  <div
      class="customer-service"
      @mouseleave="() => customerServiceOpenMouseEvent(false)"
      @mouseenter="() => customerServiceOpenMouseEvent(true)"
  >
    <div class="customer-service-action-image">
      <div v-for="customer in customerServiceArray"
           :key="customer.title"
           :title="customer.title"
           @click="() => customerServiceEmit(customer)"
           @mouseleave="(e) => customerServiceMouseEvent(e, customer, false)"
           @mouseenter="(e) => customerServiceMouseEvent(e, customer, true)"
      >
        <img :src="customer.defaultUrl" :alt="customer.title">
      </div>
    </div>
    <div class="customer-service-open-image">
      <img :src="require('@/assets/images/home/open.png')" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "CustomerService",
  props: {
    customerServiceArray: {
      type: Array,
      default: () => ([
        {
          title: '安装包',
          defaultUrl: require('@/assets/images/home/installationPackage.png'),
          defaultUrlChildren: require('@/assets/images/home/installationPackage.png'),
          activeUtl: require('@/assets/images/home/installationPackage-active.png'),
          activeUtlChildren: require('@/assets/images/home/installationPackage-active.png'),
          type: "S0004"
        },
        {
          title: '操作手册',
          defaultUrl: require('@/assets/images/home/manual.png'),
          defaultUrlChildren: require('@/assets/images/home/manual.png'),
          activeUtl: require('@/assets/images/home/manual-active.png'),
          activeUtlChildren: require('@/assets/images/home/manual-active.png'),
          type: "S0003"
        },
        {
          title: '联系我们',
          defaultUrl: require('@/assets/images/home/contactUs.png'),
          activeUtl: require('@/assets/images/home/contactUs-active.png'),
          type: ""
        }
      ])
    }
  },
  methods: {
    customerServiceMouseEvent(e, customer, activeOrDefault) {
      const {target} = e;
      for (const childNode of target.childNodes) {
        childNode.src = activeOrDefault ? customer.activeUtl : customer.defaultUrl;
      }
    },
    customerServiceOpenMouseEvent(openTransform) {
      const openElement = document.querySelector('.customer-service-open-image');
      const actionElement = document.querySelector('.customer-service-action-image');
      openElement && openTransform ? openElement.setAttribute('style', 'transform: rotate(360deg)') : openElement.setAttribute('style', 'transform: rotate(180deg)')
      actionElement && openTransform ? actionElement.setAttribute('style', 'transform: translate(0, 0)') : actionElement.setAttribute('style', 'transform: translate(56px, 0)')
    },
    customerServiceEmit(customer) {
      this.$emit('customerServiceEmit', customer)
    }
  }
}
</script>

<style scoped lang="less">
@import "./customerService.less";
</style>
